<template>
  <div>
    <p>条件渲染</p>
    <!-- v-if条件判断条件为false时删除该元素：dom被删除 -->
    <div v-if="isShow">isShow为true时候才显示</div>
    <div v-else-if="isElse">isElse为true时候才显示</div>
    <div v-else>所有条件不满足时才显示</div>

    <!-- 条件为真的时候两个都显示,template占位不会被渲染 -->
    <template v-if="isShow">
      <div>第一行</div>
      <div>第二行</div>
    </template>
    <div v-if="isShow">
      <div>第三行</div>
      <div>第四行</div>
    </div>

    <!-- 条件渲染v-show:修改样式dom不会删除 -->
    <div v-show="!isShow">条件渲染v-show</div>
  </div>
</template>

<script>
export default {
  name: "demon3",
  data() {
    return {
      isShow: true,
      isElse: true
    };
  },
  mounted() {
    setTimeout(() => {
      this.isShow = false;
    }, 3000);
  }
};
</script>
<style lang="stylus" scoped></style>
